<template>
	<swiper 
		:indicator-dots="true" 
		:autoplay="true" 
		:interval="3000" 
		:duration="1000" 
		:circular="true"
		indicator-active-color="#ffffff"
		class="swiper"
	>
		<swiper-item class="slide" v-for="item in list" :key="item.pnID">
			<image  class="swiper-img" :src="item.path"  mode="aspectFill"></image>
		</swiper-item>
	</swiper>
</template>

<script>
	export default {
		name: 'home-swiper',
		props: {
			list: Array
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../../common/scss/_common.scss";
	.swiper {
		margin: ws(15) 0;
		height: ws(250/2);
		.slide{ 
			padding: 0 ws(15);
			box-sizing: border-box;
			.swiper-img{
				width: 100%;
				height: ws(250/2);
				object-fit: cover;
				opacity: 0.8;
				border-radius: ws(5);
			}
		}
	}
</style>
